<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 1226px;
            margin: 50px auto;
            display: flex;

            /* 嵌套的语法默认会被解析为 包含选择器 : .container .magnifier-wrap */
            .magnifier-wrap {
                width: 400px;
                min-height: 500px;
                position: relative;

                .magnifier-preview {
                    width: 400px;
                    height: 400px;
                    position: relative;

                    .shadow {
                        width: 200px;
                        height: 200px;
                        background-color: rgba(0, 0, 0, 0.5);
                        position: absolute;
                        left: 0;
                        top: 0;
                    }

                    & img {
                        width: 100%;
                    }
                }

                .magnifier-scale {
                    width: 400px;
                    height: 400px;
                    position: absolute;
                    left: 410px;
                    top: 0;
                    overflow: hidden;
                    background-color: rgba(125,255,255,0.5);

                    & img{
                        width: 800px;
                        height: 800px;
                        position: absolute;
                         /*z-index: -1; */
                    }
                }
            }

            .info-wrap {
                flex: 1;
                min-height: 500px;
            }


        }
    </style>
</head>

<body>
    <!-- .container>(.magnifier-wrap>.magnifier-preview+.magnifier-list+.magnifier-scale)+.info-wrap -->
    <div class="container">
        <div class="magnifier-wrap">
            <!-- 图片预览盒子 -->
            <div class="magnifier-preview">
                <img class="smallImg" src="../images/girlsmall1.jpg" alt="">
                <div class="shadow"></div>
            </div>

            <!-- 图片切换 -->
            <!-- <div class="magnifier-list"></div> -->

            <!-- 放大盒子 -->
            <div class="magnifier-scale">
                <img class="bigImg" src="../images/girlbig1.jpg" alt="">
            </div>
        </div>
        <div class="info-wrap"></div>
    </div>
</body>
<script>
    // shadow跟随鼠标在magnifierPreview中移动?

    // (1) 鼠标在哪里移动  magnifierPreview
    // (2) shadow跟随鼠标移动 => 鼠标的位置
    // (3) shadow如何跟随鼠标移动(margin  position  translate)    => position

    // 中心跟随  => 将鼠标调整至盒子中心
    // 问题: 移动鼠标, 还是盒子
    // (1) 分析: 移动鼠标, 盒子跟随鼠标一起动  => 不行
    // (2) 分析: 移动盒子 => 调整盒子的left和top值


    /* 
        放大镜实现步骤
        (1) 所谓放大镜 => 呈等比例放大
        smallImg(400)            shadow(200)                       shadow移动的距离(x,y)
        ——————————————  =   ——————————————————     = 缩放比例 = —————————————————————————  
            bigImg          magnifierScale(400)                    bigImg移动的距离(x*2,y*2)

            a. 推算出大图片应该设置的宽高  =>  800

        (2) 左边移动的是shadow, 右边移动的是大图片  => 大图片需要定位

        (3) shadow和大图片移动的距离也是等比例,且反向的
    
    */


    var magnifierWrap = document.getElementsByClassName("magnifier-wrap")[0];
    var magnifierPreview = document.getElementsByClassName("magnifier-preview")[0];
    var shadow = document.getElementsByClassName("shadow")[0];
    var bigImg = document.getElementsByClassName("bigImg")[0];
    var smallImg = document.getElementsByClassName("smallImg")[0];

    var maxLeft = magnifierPreview.clientWidth - shadow.clientWidth;
    var maxTop = magnifierPreview.clientHeight - shadow.clientHeight;

    var scale = bigImg.clientWidth / smallImg.clientWidth;
    console.log(scale);


    magnifierPreview.onmousemove = function (e) {
        e = e || window.event;
        // console.log(e);


        // 期望获取的鼠标相对于magnifierPreview的位置(左上角)

        // 问题1: 
        // magnifierPreview的offsetLeft / offsetTop 获取的是相对于magnifier-wrap(有定位)的左偏移和上偏移 => 0 0 
        console.log(magnifierPreview.offsetLeft, magnifierPreview.offsetTop);

        // 解决方案: 
        // 找magnifier-wrap的左偏移和上偏移
        var x = e.pageX - magnifierWrap.offsetLeft - shadow.clientWidth / 2;
        var y = e.pageY - magnifierWrap.offsetTop - shadow.clientHeight / 2;

        if (x < 0) x = 0;
        if (x > maxLeft) x = maxLeft;
        if (y < 0) y = 0;
        if (y > maxTop) y = maxTop;

        // console.log(x, y);

        shadow.style.left = x + "px";
        shadow.style.top = y + "px";

        bigImg.style.left = -scale * x + "px";
        bigImg.style.top = -scale * y + "px";
    }

</script>

</html>